<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>按钮点击需求1.0</title>
</head>
<style>
  #modal {
    height: 200px;
    width: 200px;
    line-height: 200px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid black;
    text-align: center;
  }
</style>

<body>
  <button id='open'>点击打开</button>
  <button id='close'>关闭弹窗</button>
</body>
<script>
  // 弹窗创建逻辑，这里我们复用了单例模式面试题的例子
  const Modal = (function () {
    let modal = null
    return function () {
      if (!modal) {
        modal = document.createElement('div')
        modal.innerHTML = '您还未登录哦~'
        modal.id = 'modal'
        modal.style.display = 'none'
        document.body.appendChild(modal)
      }
      return modal
    }
  })()

  // 定义打开按钮
  class OpenButton {
    // 点击后展示弹窗（旧逻辑）
    onClick() {
      const modal = new Modal()
      modal.style.display = 'block'
    }
  }

  // 定义按钮对应的装饰器
  class Decorator {
    constructor(open_button) {
      this.open_button = open_button
    }

    onClick() {
      // 复用之前的逻辑
      this.open_button.onClick()
      // 要修改的逻辑
      this.changeButtonStatus()
    }

    // 按钮文案修改逻辑
    changeButtonText() {
      const btn = document.getElementById('open')
      btn.innerText = '快去登录'
    }

    // 按钮置灰逻辑
    disableButton() {
      const btn = document.getElementById('open')
      btn.setAttribute("disabled", true)
    }

    // 新版本功能逻辑整合
    changeButtonStatus() {
      this.changeButtonText()
      this.disableButton()
    }
  }

  const openButton = new OpenButton()
  const decorator = new Decorator(openButton)

  // 点击打开按钮展示模态框
  document.getElementById('open').addEventListener('click', function () {
    decorator.onClick()
  })

  // 点击关闭按钮隐藏模态框
  document.getElementById('close').addEventListener('click', function () {
    const modal = document.getElementById('modal')
    if (modal) {
      modal.style.display = 'none'
    }
  })
</script>

</html>